<template>
  <transition name="fade">
    <aside class="users" v-if="modifyType == null">
      <div class="pu">
        <p class="photo">
          <span class="lf">个人头像</span>
          <img class="rf" :src="$api.preview(user.avatar)"/>
          <!-- 单击头像，修改用户头像 -->
          <input type="file" @change="modifyAvatar" accept="image/png,image/jpeg,image/jpg,image/gif">
        </p>

        <p class="tel disable">
          <span class="lf">手机号码</span>
          <span class="rf">{{ telSecure(user.tel) }}</span>
        </p>

        <p class="nickname" @click="modifyField('nickname')">
          <span class="lf">昵称</span>
          <span class="rf">{{ user.nickName }}</span>
        </p>

        <p class="sex" @click="modifyField('sex')">
          <span class="lf">性别</span>
          <span class="rf">{{ user.sex }}</span>
        </p>

        <p class="email" @click="modifyField('email')">
          <span class="lf">邮箱</span>
          <span class="rf">{{ emailSecure(user.email) }}</span>
        </p>
        <a href="/modify">
          <p class="password">
            <span class="lf">修改密码</span>
          </p>
        </a>
      </div>
    </aside>
  </transition>

  <transition name="user">
    <!-- 修改 昵称的 窗口 -->
    <aside class="modify-win nickname" v-if="modifyType === 'nickname'">
      <div class="title"><i @click="modifyType = null"></i>修改-昵称</div>
      <div class="content">
        <input type="text" :value="user.nickName">
        <button @click="modifyNickName">确定修改</button>
      </div>
    </aside>
  </transition>

  <transition name="user">
    <!-- 修改 性别的 窗口 -->
    <aside class="modify-win sex" v-if="modifyType === 'sex'">
      <div class="title"><i @click="modifyType = null"></i>修改-性别</div>
      <div class="content">
        <input type="radio" name="sex" value="m" :checked="sexCode === 'm'" id="c-sex-m"><label for="c-sex-m">男</label>
        <input type="radio" name="sex" value="f" :checked="sexCode === 'f'" id="c-sex-f"><label for="c-sex-f">女</label>
        <input type="radio" name="sex" value="s" :checked="sexCode === 's'" id="c-sex-s"><label for="c-sex-s">保密</label>
        <button @click="modifySex">确定修改</button>
      </div>
    </aside>
  </transition>

  <transition name="user">
    <!-- 修改 邮箱的 窗口 -->
    <aside class="modify-win email" v-if="modifyType === 'email'">
      <div class="title"><i @click="modifyType = null"></i>修改-邮箱</div>
      <div class="content">
        <input type="text" v-model="oldEmail" placeholder="请输入原注册的邮箱">
        <input type="text" v-model="newEmail" placeholder="请输入新的邮箱">
        <button @click="modifyEmail">确定修改</button>
      </div>
    </aside>
  </transition>
</template>

<script>

export default {
  props: {
    user: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      modifyType: null, // 要修改的属性
      oldEmail: null,
      newEmail: null,
    }
  },
  methods: {
    modifyField(type) {
      this.modifyType = type;
    },
    emailSecure(email) {
      return "****" + email.substring(email.indexOf("@"));
    },
    telSecure(tel) {
      return tel.substring(0, 3) + "****" + tel.substring(7);
    },
    modifyNickName(event) {
      let nickName = event.target.previousElementSibling.value;
      this.$api.modifyUserField({nickName: nickName}).then(ret => {
        if (ret.status) {
          this.user.nickName = nickName;
          this.$store.commit("modifyUserField", {name: "nickName", value: nickName});
          this.modifyType = null;
        }
      })

    },
    modifySex(event) {
      let radioButtons = event.target.parentNode.querySelectorAll("input[type=radio]");
      let selectedValue = null;
      for (const radioButton of radioButtons) {
        if (radioButton.checked) {
          selectedValue = radioButton.value;
          break; // 找到一个被选中的单选框后可以跳出循环
        }
      }
      if (selectedValue) {
        this.$api.modifyUserField({sex: selectedValue}).then(ret => {
          if (ret.status) {
            this.user.sex = selectedValue == "m" ? "男" : (selectedValue == "f" ? "女" : "保密");
            this.$store.commit("modifyUserField", {name: "sex", value: this.user.sex});
            this.modifyType = null;
          }
        })
      }
    },
    modifyEmail() {
      if (this.oldEmail !== this.user.email) {
        this.$toastr.error("绑定的原邮箱不正确");
        return;
      }
      if (!/^[\w\.-]+@[\w\.-]+\.\w+$/.test(this.newEmail)) {
        this.$toastr.error("新邮箱格式不正确");
        return;
      }
      this.$api.modifyUserField({oldEmail: this.oldEmail, newEmail: this.newEmail}).then(ret => {
        if (ret.status) {
          this.user.email = this.newEmail ;
          this.$store.commit("modifyUserField", {name: "email", value: this.user.email});
          this.modifyType = null;
        }
      })
    },
    modifyAvatar(event) {
       // 获取 上传的文件对象
      let file = event.target.files[0] ;
      if (file == null) return ;
      this.$api.modifyUserField({avatar: file}).then(ret => {
        if (ret.status) {
          this.user.avatar = ret.data ;
          this.$store.commit("modifyUserField", {name: "avatar", value: ret.data});
          this.modifyType = null;
        }
      })
    }
  },
  computed: {
    sexCode() {
      return this.user.sex === "男" ? "m" : (this.user.sex === "女" ? "f" : "s");
    }
  }
}
</script>

<style>
.user-enter-active, .fade-enter-active {
  transition: all .3s linear;
}

.user-enter-from {
  transform: translateX(250px);
}

.fade-enter-from {
  transform: translateX(-250px);
}
</style>